<template>
  <div class="subject">
    <ul class="uu">
      <li v-for="item in list.value" :key="item.id">
        <input type="checkbox" name="item" @change="chufa(item.id)" />
        {{ item.name }}
      </li>
    </ul>
    <van-button plain hairline type="primary" @click="gotopersonal"
      >保存</van-button
    >
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      list: [],
      user_attr: [],
    };
  },
  mounted() {
    this.getattribute();
  },
  methods: {
    getattribute() {
      this.$API.attribute().then((res) => {
        // console.log(res);
        this.list = res.data.data[1];
      });
    },
    chufa(e) {
      //   console.log(event.target.checked);
      // console.log(e);
      if (event.target.checked) {
        this.user_attr.push({ attr_id: 2, attr_val_id: e });
      } else {
        this.user_attr = this.user_attr.filter((element) => {
          return element.attr_val_id != e;
        });
      }
      //    let user_attr = JSON.stringify(this.user_attr);
      // console.log(this.user_attr);
    },

    gotopersonal() {
      let user_attr = JSON.stringify(this.user_attr);
      localStorage.setItem("user_attr", user_attr);
      this.$API.user({ user_attr: user_attr }).then((res) => {
        if (res.data.code == 200) {
          Toast.success(res.data.msg);
          this.$router.push("/personal");
        }
      });
    },
  },
};
</script>
<style lang="scss">
.subject {
  min-height: 93vh;
  background-color: #f0f2f5;
  .uu {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 15px;
    background-color: white;
    font-size: 0.35rem;
    li {
      padding: 20px 0;
    }
  }
}
</style>